<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="./css/unite.css"  rel="stylesheet" />
		<link href="./css/index.css"  rel="stylesheet" />
	</head>
	<body>
		<div class="replayDiv">
			<video id="face" autoplay playsinline muted></video>
			<video id="preview"autoplay playsinline muted></video>
			<video id="replay" autoplay playsinline muted></video>
		</div>
		<div class="workDiv">
			<div class="recordStartBtn">
				<p class="help">请选择录制内容</p>
				<button id="recordScreen" type="button" class="bttn-unite bttn-md bttn-primary" onclick="recordScreen()"> 录屏 </button>
				<button id="recordCamera" type="button" class="bttn-unite bttn-md bttn-primary" onclick="recordCamera()"> 录像 </button>
				<button id="recordScreenWithCamera" type="button" class="bttn-unite bttn-md bttn-primary" onclick="recordScreenWithCamera()"> 带摄像头录屏 </button>
			</div>
			<div class="recordingBtn">
				<p class="help">录制中</p>
				<button id="pause" type="button" class="bttn-unite bttn-md bttn-warning" onclick="recordPause()"> 暂停 </button>
				<button id="resume" type="button" class="bttn-unite bttn-md bttn-success" onclick="recordResume()"> 恢复 </button>
				<button type="button" class="bttn-unite bttn-md bttn-danger" onclick="recordStop()"> 停止 </button>
			</div>
			<div class="downloadBtn">
				<p class="help">已停止录制，回放中</p>
				<button id="pause" type="button" class="bttn-unite bttn-md bttn-warning" onclick="download()"> 下载 </button>
			</div>
		</div>
	</body>
	<script src="./js/webrtc.js"></script>
	<script type="text/javascript">
		document.body.height=window.innerHeight;
		
		//录制屏幕
		async function recordScreen(){
			var stream = await webrtc.displayDesktop(document.getElementById("preview"));
			stream.getVideoTracks()[0].addEventListener('ended',recordStop);
			startRecord();
		}
		
		//录制摄像头
		async function recordCamera(){
			var stream = await webrtc.displayCamera(document.getElementById("preview"));
			stream.getVideoTracks()[0].addEventListener('ended',recordStop);
			startRecord();
		}
		
		//带摄像头录屏
		function recordScreenWithCamera(){
			document.getElementsByClassName("help")[0].innerText="请在摄像头上右键，选择'画中画'功能后，再点击录屏按钮";
			var faceVideo = document.getElementById("face");
			webrtc.displayCamera(faceVideo,null,false);
			faceVideo.style.display = "block";
			hideById("recordCamera","recordScreenWithCamera");
		}
		
		//开始录制
		function startRecord(){
			webrtc.recordStart(null,function(){
				//hideById("face");
				hideByClass("recordStartBtn");
				showByClass("recordingBtn");
			},function(err){
				alert(err);
			});
		}
		
		//暂停
		function recordPause(){
			webrtc.recordPause();
			document.getElementById("resume").style.display="inline";
			document.getElementById("pause").style.display="none";
			document.getElementsByClassName("help")[1].innerText="已暂停录制";
		}
		//恢复
		function recordResume(){
			webrtc.recordResume();
			document.getElementById("pause").style.display="inline";
			document.getElementById("resume").style.display="none";
			document.getElementsByClassName("help")[1].innerText="录制中";
		}
		//停止
		function recordStop(){
			webrtc.recordStop();
			document.getElementById("preview").style.display="none";
			document.getElementById("replay").style.display="block";
			webrtc.recordReplay(document.getElementById("replay"));
			document.getElementsByClassName("recordingBtn")[0].style.display="none";
			document.getElementsByClassName("downloadBtn")[0].style.display="block";
		}
		
		//下载
		function download(){
			webrtc.downloadRecord();
		}
		
		
		//隐藏元素
		function hideByClass(){
			for(var i=0;i<arguments.length;i++){
				var arr = document.getElementsByClassName(arguments[i]);
				for(var j=0;j<arr.length;j++){
					arr[j].style.display = "none";
				}
			}
		}
		
		//显示元素
		function showByClass(){
			for(var i=0;i<arguments.length;i++){
				var arr = document.getElementsByClassName(arguments[i]);
				for(var j=0;j<arr.length;j++){
					arr[j].style.display = "block";
				}
			}
		}
		
		//隐藏元素
		function hideById(){
			for(var i=0;i<arguments.length;i++){
				document.getElementById(arguments[i]).style.display = "none";
			}
		}
		
		//显示元素
		function showById(display){
			for(var i=0;i<arguments.length;i++){
				document.getElementById(arguments[i]).style.display = "block";
			}
		}
		
	</script>
</html>
